<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>团餐介绍</h3>
      <el-form ref="dataForm" :rules="rules" :model="product" label-width="150px">
        <el-form-item label="团餐名称" prop="name">
          <el-input v-model="product.name" />
        </el-form-item>

        <el-form-item label="排序" prop="orderC">
          <el-input v-model="product.orderC" />
        </el-form-item>

        <el-form-item label="团餐详细介绍" prop="detail">
          <editor v-model="product.description" :init="editorInit" />
        </el-form-item>

      </el-form>
    </el-card>
    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button v-if="!product.id" type="primary" @click="handleCreate">保存商品</el-button>
      <el-button v-if="product.id" type="primary" @click="handleEdit">更新商品</el-button>
    </div>
  </div>
</template>

<script>
import { detailProduct, editProduct, createProduct } from "@/api/groupshopad";
import { uploadPath, createStorage } from "@/api/storage";
import Editor from "@tinymce/tinymce-vue";
import { MessageBox } from "element-ui";
import { getToken } from "@/utils/auth";

export default {
  name: "ProductAdd",
  components: { Editor },
  data() {
    return {
      zzjgId: -999,
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      uploadPath,
      freightList: [],
      imgsFileList: [],
      categoryList: [],
      categoryIds: [],
      skuTableData: [],
      product: {
        imgList: [],
        type: 0
      },
      attributeVisiable: false,
      attributeForm: { attribute: "", value: "" },
      attributes: [],
      skuBatchPriceVisiable: false,
      skuBatchPriceForm: {},
      specVisiable: false,
      specForm: { title: undefined },
      skuList: [],
      specList: [],
      skuStatusDialogMap: { "create": "创建sku", "update": "更新sku" },
      specStatusDialogMap: { "create": "创建规格", "update": "更新规格" },
      skuStatus: "",
      specStatus: "",
      rules: {

        name: [
          { required: true, message: "团餐名称不能为空", trigger: "blur" }
        ],
        description: [{ required: true, message: "请填写商品详情", trigger: "blur" }]
      },
      editorInit: {
        language: "zh_CN",
        convert_urls: false,
        plugins: ["advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount"],
        toolbar: ["searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample", "hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen"],
        images_upload_handler: function(blobInfo, success, failure) {
          const formData = new FormData();
          formData.append("file", blobInfo.blob());
          createStorage(formData).then(res => {
            success(res.data.url);
          }).catch((e) => {
            console.log(e);
            failure("上传失败，请重新上传");
          });
        }
      }

    };
  },
  computed: {
    headers() {
      return {
        ADMINTOKEN: getToken(),
        Authorization: "Bearer " + getToken()
      };
    }
  },
  created() {
    this.init();
  },
  methods: {
    init: function() {
      const productId = this.$route.query.id;
      this.zzjgId = this.$route.query.zzjgId;
      if (productId) {
        detailProduct(productId).then(response => {
          // 深拷贝
          this.product = JSON.parse(JSON.stringify(response.data.data));
        });
      }
    },
    handleCategoryChange(value) {
      this.product.categoryId = value[value.length - 1];
      this.category = value[value.length - 1];
    },
    handleCancel: function() {
      this.$router.push({ path: "/product" });
    },
    handleCreate: function() {
      this.handleUpsert("create");
    },
    handleEdit: function() {
      this.handleUpsert("edit");
    },
    /**
     * 执行更新添加操作，传入操作action字符串: 'create', 'edit'
     */
    handleUpsert(action) {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.product.zzjgId = this.zzjgId;
          console.log("prode", finalProduct);
          const finalProduct = {
            ...this.product
          };
          let method = createProduct;
          let successWords = "创建成功";
          if (action === "edit") {
            method = editProduct;
            successWords = "编辑成功";
          }

          method(finalProduct)
            .then(response => {
              this.$notify.success({
                title: "成功",
                message: successWords
              });
              this.$router.push({ path: "/groupshop", query: { zzjgId: this.currentId }});
            })
            .catch(response => {
              MessageBox.alert("业务错误：" + response.data.errmsg, "警告", {
                confirmButtonText: "确定",
                type: "error"
              });
            });
        } else {
          this.$notify.error({
            title: "失败",
            message: "请完善以上表单"
          });
        }
      });
    },
    /** ******************* 图片上传相关 *********************/
    uploadOverrun: function() {
      this.$message({
        type: "error",
        message: "上传文件个数超出限制!最多上传5张图片!"
      });
    },
    handleimgsUrl(response, file, fileList) {
      if (response.errno === 200) {
        this.product.imgList.push(response.url);
        this.product.img = this.product.imgList[0];
      }
    },
    handleRemove: function(file, fileList) {
      for (var i = 0; i < this.product.imgList.length; i++) {
        // 这里存在两种情况
        // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.url
        //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
        // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
        var url;
        if (file.response === undefined) {
          url = file.url;
        } else {
          url = file.response.url;
        }

        if (this.product.imgList[i] === url) {
          this.product.imgList.splice(i, 1);
        }
      }
      if (this.product.imgList.length > 0) {
        this.product.img = this.product.imgList[0];
      }
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      const inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    }

  }
};
</script>

<style>
.el-card {
  margin-bottom: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.input-new-keyword {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 145px;
  height: 145px;
  display: block;
}

.sku-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.sku-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.sku-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.sku {
  width: 60px;
  height: 60px;
  display: block;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
